<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>选择模板</title>
    <#include "/pubHeadStyle.html">
    <link rel="stylesheet" href="${ctx}/css/form.css">
</head>
<body>
<div class="layui-form" lay-filter="formData" id="formData" style="background: #fff;">
    <div class="layui-form selectTemplate" style="padding:6px;padding-top:10px;">
        <div class="layui-form-item">
            <label class="layui-form-label">主表模板</label>
            <div class="layui-input-block">
                <select id="mainTemplateId">
                    <option value="4">4行*4列</option>
                    <option value="3" selected>3行*3列</option>
                    <option value="2">2行*2列</option>
                </select>
            </div>
        </div>
        <#if subList?? && (subList?size > 0) >
        <div class="layui-form-item subList" style="padding:10px 0">
            <label class="layui-form-label">子表模板</label>
            <div class="layui-input-block">
                <select id="subTemplateId" lay-filter="subTemplateId">
                    <option value="1">弹窗</option>
                    <option value="2">表格内</option>
                </select>
            </div>
        </div>
        </#if>
    <#if subList?? && (subList?size > 0) >
    <div class="layui-tab layui-tab-card">
        <ul class="layui-tab-title">

            <#list subList as item>
            <#if item_index == 0>
            <li class="layui-this">${item.tableName}</li>
            <#else>
            <li>${item.tableName}</li>
            </#if>
            </#list>
        </ul>
    <div class="layui-tab-content">
        <#if subList?? && (subList?size > 0) >
        <#list subList as item>
        <#if item_index == 0>
        <div class="layui-tab-item layui-show">
            <#else>
            <div class="layui-tab-item">
            </#if>
            <table class="layui-hide" id="subList${item.tableId}" lay-filter="subList${item.tableId}"></table>
        </div>
        </#list>
        </#if>
    </div>
</div>
</#if>

<div class="layui-form-item">
    <#if subList?? && (subList?size > 0) >
    <div class="layui-input-block" style="position: absolute;bottom: 2%;left: 26%;">
        <#else>
        <div class="layui-input-block" style="position: absolute;bottom: 7%;left: 12%;">
        </#if>
        <span class="layui-btn savaNext">下一步</span>
        <span class="layui-btn layui-btn-danger cancel">返回</span>
    </div>
</div>
</div>
<script>
    layui.config({
        base: serverPath.formPath + staticPath.formPath //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use(['index', 'form', 'jquery', 'table', 'layer', 'setter', 'commons'], function () {
        var form = layui.form
            , layer = layui.layer
            , table = layui.table;
        var setter = layui.setter;
        var commons = layui.commons;
        var $ = layui.$;
        form.render();
        form.on("select(subTemplateId)", function (data) {
            $("input[name='dialogDisplay']").removeAttr("disabled");
            //子表选择表格内模板的时候，弹框显示的checkbox禁用
            if(data.value === "2"){
                $("input[name='dialogDisplay']").attr("disabled", "disabled");
            }
            form.render("checkbox");
        });
        //关闭弹窗
        $(".cancel").on("click", function () {
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        });
        var mainTableId = '${mainTableId}';
        var subIds;
        //获取子表列表内容
        $.ajax({
            type: 'get',
            url: serverPath.formPath + setter.formLinkPath + "formDef/getMainSubInfo",
            dataType: 'json',
            data: {"mainTableId":mainTableId},
            success: function (result) {
                var subInfoArray = result.data.subList;
                subIds = result.data.subIds;
                if (subInfoArray.length > 0) {
                    for (var i = 0; i < subInfoArray.length; i++) {
                        table.render({
                            elem: '#subList' + subInfoArray[i].subTableId
                            , cellMinWidth: 80
                            , data: subInfoArray[i].fields
                            , height: 'full-250'
                            , cols: [[
                                {field: 'fieldName', title: '字段名称', align: 'center'}
                                , {
                                    field: 'listDisplay', title: '列表显示', align: 'center',
                                    templet: function (d) {
                                        return '<input type="checkbox" lay-skin="primary" name="listDisplay"/>';
                                    }
                                }
                                , {
                                    field: 'dialogDisplay', title: '弹窗显示', align: 'center',
                                    templet: function (d) {
                                        return '<input type="checkbox" lay-skin="primary" name="dialogDisplay"/>';
                                    }
                                }
                            ]]
                            , page: false
                            , limit: 1000
                        });
                    }
                }
            }
        });

        //点击下一步时候，组装选中显示的列信息；并更新表单表中相应的字段数据
        $(".savaNext").click(function () {
            var newOpenWindow = window.open();
            var parentName = '${parentName}';
            var subject="";
            var formKey="";
            var isPublic="";
            var formDesc="";
            var parentIndex="";
            if (parentName != "" && parentName != undefined) {
                var ifr = window.parent.frames[parentName];
                var win = ifr.window || ifr.contentWindow;
                subject =  win.document.getElementById("subject").value;
                formKey =  win.document.getElementById("formKey").value;
                formDesc =  win.document.getElementById("formDesc").value;
                var isPublicArr = win.document.getElementsByName("isPublic");
                for(var b=0;b<isPublicArr.length;b++){
                   if(isPublicArr[b].checked){
                       isPublic = isPublicArr[b].value;
                   }
                }
                parentIndex = win.document.getElementById("parentIndex").value;
            }
            var mainTemplateId =  $("#mainTemplateId").val(); //主表选择的模板
            var subTemplateId = $("#subTemplateId").val(); //子表选择的模板
            var templatesId = mainTemplateId+";";
            if(subTemplateId){
                templatesId += subTemplateId;
            }
            var subArray = [];
            for (var i = 0; i < subIds.length; i++) {
                var subTemplateField = {"subTableId": "", "listDisplay": "", "dialogDisplay": ""};
                var subId = subIds[i];
                subTemplateField.subTableId = subId;
                var subTableData = $(".layui-tab-content").contents().find("div[lay-id='subList" + subId + "'] .layui-table-body tr");
                var listDisplayStr = "";
                var dialogDisplayStr = "";
                subTableData.each(function (i, item) {
                    var tdInfo = $(item).children();
                    var subFieldName = $.trim(tdInfo[0].textContent);
                    var listDisplayFlag = $(item).find("input[name='listDisplay']")[0].checked;
                    var dialogDisplayFlag = $(item).find("input[name='dialogDisplay']")[0].checked;
                    if (listDisplayFlag) {
                        listDisplayStr += subFieldName + ",";
                    }
                    if (dialogDisplayFlag) {
                        dialogDisplayStr += subFieldName + ",";
                    }
                });
                subTemplateField.listDisplay = listDisplayStr;
                subTemplateField.dialogDisplay = dialogDisplayStr;
                subArray.push(subTemplateField);
            }
            $.ajax({
                url: serverPath.formPath + setter.formLinkPath + "formDef/add",
                type: "post",
                dataType: 'json',
                data: {subject:subject,formKey:formKey,formDesc:formDesc,isPublic:isPublic,designType:0,
                    templatesId:templatesId,subTemplateField:JSON.stringify(subArray),categoryId:'${categoryId}',mainTableId:mainTableId},
                success: function (result) {
                    if (commons._filterRecord(result)) {
                        var formDefId = result.data;
                        parent.layer.close(parentIndex);
                        var defIndex = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(defIndex);
                        newOpenWindow.location = serverPath.formPath + setter.formLinkPath + 'formDef/view/formDesign/formDevise?formDefId=' + formDefId;
                    } else {
                        window.parent.layer.alert(result.msg);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.alert("保存失败！" + XMLHttpRequest.status);
                }
            });
            return false;
        });
    })
</script>
<style>
    body {
        background: #fff;
    }
    .layui-checkbox-disbaled, .layui-checkbox-disbaled i{
        background: #e2e2e2 !important
    }
    .layui-table-body{
        overflow-x:hidden;
    }
</style>
</body>
</html>
